<template>
  <div id="home">
    <el-row :gutter="20">
      <el-col :span="18">
        <!--轮播图开始-->
        <el-carousel height="300px">
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad0.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad1.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad2.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad3.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad4.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>
          <el-carousel-item >
            <img src="@/assets/imgs/index_ad5.jpg" width="100%" height="100%" alt="">
          </el-carousel-item>

        </el-carousel>
        <!--轮播图结束-->
      </el-col>
      <el-col  :span="6" style=" padding: 0px;">
        <el-card style="width: 100%;">
          <h4 style="height: 8px;padding-top: 0px">
            <i style="font-weight: bold; "
               class="el-icon-trophy">销量最高</i>
          </h4>
          <el-divider style="margin: 10px 0px 10px 0px"></el-divider>
          <el-table
              :data="topArr"
              style="width: 100%">
            <el-table-column type="index" label="排名" width="50px">
            </el-table-column>
            <el-table-column prop="title" label="商品标题" width="100">
            </el-table-column>
            <el-table-column prop="saleCount" label="销量">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div>
      <div class="notice" >
        <img src="@/assets/imgs/billboard.gif" alt="">
        <p >加体育教育厅cn记得拿伞今年的处缴纳吹牛逼财奴基础今年初hi案促hi案促九曲回肠女司机才能不会CIAUNcn才不呢
          具体融钰集团以附加</p>
      </div>
      <div class="hottitle">
        <div><img src="@/assets/imgs/hottitle.gif"></div>
        <div id="b_r_div">
          <div>
            <img src="@/assets/imgs/TS1.jpg">
            <p class="title_p2">.NET设计规范</p>
          </div>
          <div>
            <img src="@/assets/imgs/TS2.jpg">
            <p class="title_p2">深入浅出</p>
          </div>
          <div>
            <img src="@/assets/imgs/TS3.jpg">
            <p class="title_p2">DONT MAKE ME</p>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

export default {
  data() {
    return{
      activeIndex: '1',
      topArr:[{title:"小米电视",saleCount:688},
        {title:"华为手机",saleCount:322},
        {title:"匹克球鞋",saleCount:256},
        {title:"联想电脑",saleCount:198}]
    }
  },
  methods:{
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    search(){
    }
  }
}
</script>

<style>
#home{
  width: 1080px ;
  margin: 0 auto;
}
.el-card__body{
  padding: 0;
}
</style>